<template>
  <div style="height:100%">
    <div class="page-body">
      <Toolbar class="page-header" :editor="editorRef" :defaultConfig="toolbarConfig" mode="simple" />
      <Editor class="page-content" :defaultConfig="editorConfig" mode="simple" v-model="thisValue"
        @onCreated="handleCreated" @onChange="handleChange" @onDestroyed="handleDestroyed" @onFocus="handleFocus"
        @onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick } from "vue";
import { getFileUrl } from '@/utils/bus';
export default defineComponent({
  name: "WangeditorVue",
})
</script>
<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, onMounted, computed } from 'vue';
import { FILE_URL, API_URL_ROOT } from "@/config";
import { uploadFile, upVideo } from "@/utils/api";
import { ElMessage } from "element-plus";
import { DomEditor, IToolbarConfig, IEditorConfig } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';


let props = withDefaults(defineProps<{
  modelValue: string;
  imgUrl?: string;
  docType: string;
}>(), {
  imgUrl: "",
})

const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
}>()

let thisValue = computed({
  set(value: string) {
    emit("update:modelValue", value);
  },
  get() {
    return props.modelValue;
  }
})

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

/**
 * 工具栏配置
 */
const toolbarConfig: Partial<IToolbarConfig> = {  // TS 语法
  toolbarKeys: [
    "header1",
    "header2",
    "header3",
    "|",
    "bold",
    "underline",
    "through",
    "color",
    "bgColor",
    "|",
    "justifyLeft",
    "justifyCenter",
    "justifyRight",
    "|",
    "uploadImage",
    "|",
    "undo",
  ]
}

/**
 * 编辑器配置
 */
const editorConfig: Partial<IEditorConfig> = {   // TS 语法
  MENU_CONF: {
    /**
     * 自定义上传图片
     */
    uploadImage: {
      customUpload(
        file: File,
        insert: any
      ) {
        uploadFile(
          file,
          props.docType,
          {
            isImage: true
          }
        ).then(res => {
          insert(getFileUrl(res.fileEntity));
        });
      }
    }
  }
}

// 编辑器回调函数
const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要!
};

const handleChange = (editor: any) => {
};
const handleDestroyed = (editor: any) => {
};
const handleFocus = (editor: any) => {
};
const handleBlur = (editor: any) => {
};
const customAlert = (info: any, type: any) => {
};
const customPaste = (editor: any, event: any, callback: any) => {
  callback(false); // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
};

const insertText = (value: any) => {
  const editor = editorRef.value;
  if (editor == null) return;
  nextTick(() => {
    editor.insertText(value);
    editor.txt.html(value)
  })
};

const printHtml = () => {
  const editor = editorRef.value;
  if (editor != null) {
    return editor.getHtml()
  }
};

const disable = () => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.disable()
};

/**
 * 
 * 
 */

/**
 * 应用启动
 */
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
  // }, 1500);
});

/**
 * 组件销毁时，也及时销毁编辑器，重要！
 */
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;

  editor.destroy();
});


/**
* 导出
*/
defineExpose({
  handleFocus,
  insertText,
  printHtml,
  disable
})
</script>

<style lang="less" scoped>
.page-body {
  height: 100%;
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

.page-header {
  flex-shrink: 0;
  border-bottom: 1px solid #ccc;
}

.page-content {
  flex-grow: 1;
  height: 0;
  overflow-y: hidden
}

.page-rowimg {
  display: flex;
  align-items: center;

  >img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>